<template>
  <view :class="$style.call_container" @click="getClick">
    <collapse-panel :title-name="titleName" :showPage='showPage'></collapse-panel>

    <view :class="$style.statistic" class="flex justify-center items-baseline">
      <text :class="$style.number">{{ callInfo.jcjBjjlInfos.length || 0 }}</text>
      <text :class="$style.text">次</text>
    </view>

    <view :class="$style.risk">
      <view :class="$style.risk_title">
        <view>低风险</view>
        <view>高风险</view>
      </view>
      <view :class="$style.risk_num">
        <view :class="$style.left_num" :style="{ width: callInfo.bjcs * 10 * 1.25 + '%' || 30 + '%' }"></view>
        <view :class="$style.right_num"
          :style="{ width: (callInfo.zdBjcs - callInfo.bjcs) * 10 * 1.25 + '%' || 70 + '%' }">
        </view>
      </view>
    </view>

    <view :class="$style.call_info" v-show="!showPage">
      <view class="flex flex-row items-center" style="margin-bottom: 20rpx;margin-top: 10rpx;">
        <view :class="$style.call_text">{{ firstAlarmPerson[0].bjrq }}</view>
        <view :class="$style.call_text">{{ firstAlarmPerson[0].bjsk }}</view>
        <uni-badge absolute="rightTop" size="small" text="2">
          <view :class="$style.call_text">{{ firstAlarmPerson[0].bjrdh }} <view :class="$style.call_num"
              v-show="firstAlarmPerson[0].bjcs > 1">{{ firstAlarmPerson[0].bjcs }}</view>
          </view>
        </uni-badge>
        <view class="flex justify-center" style="width: 90rpx; margin-left: 30rpx;">
          <img :src="firstCallImg" mode="widthFix" style="width: 44rpx;" v-show="firstAlarmPerson[0]?.sfdygbj" />
          <image :src="trappedImg" mode="widthFix" style="width: 44rpx;" v-show="firstAlarmPerson[0]?.sfbk" />
        </view>
        <image :src="phoneImg" mode="widthFix" style="width: 30rpx; margin: 0 20rpx"
          @click="callUpToPhone(firstAlarmPerson[0]?.bjrdh || '')"></image>
        <view class="record flex">
          <image :src="recordImg" mode="widthFix" style="width: 30rpx"></image>
          <view :class="$style.call_duration">{{ firstAlarmPerson[0].czsc }}</view>
        </view>
      </view>
    </view>


    <view :class="$style.call_info" v-show="showPage">
      <view class="flex flex-row items-center" style="margin-bottom: 20rpx; margin-top: 10rpx;"
        v-for="(item, index) in callInfo.jcjBjjlInfos" :key="index">
        <view :class="$style.call_text">{{ item.bjrq }}</view>
        <view :class="$style.call_text">{{ item.bjsk }}</view>
        <uni-badge absolute="rightTop" size="small" text="2">
          <view :class="$style.call_text">{{ item.bjrdh }} <view :class="$style.call_num" v-show="item.bjcs > 1">
              {{ item.bjcs }}</view>
          </view>
        </uni-badge>
        <view class="flex justify-center" style="width: 90rpx; margin-left: 30rpx;">
          <image :src="firstCallImg" mode="widthFix" style="width: 44rpx;" v-show="item.sfdygbj" />
          <image :src="trappedImg" mode="widthFix" style="width: 44rpx;" v-show="item.sfbk" />
        </view>
        <image :src="phoneImg" mode="widthFix" style="width: 30rpx; margin: 0 20rpx"
          @click="callUpToPhone(item.bjrdh || '')"></image>
        <view class="record flex">
          <image :src="recordImg" mode="widthFix" style="width: 30rpx"></image>
          <view :class="$style.call_duration">{{ item.czsc }}</view>
        </view>
      </view>
    </view>
  </view>

</template>

<script setup lang='ts'>

import { callUpToPhone } from '@/utils'
import CollapsePanel from "@/components/common/collapse-panel.vue";
import firstCallImg from "@/static/images/alert-detail/first_call.png";
import trappedImg from "@/static/images/alert-detail/trapped.png";
import phoneImg from "@/static/images/alert-detail/phone.png";
import recordImg from "@/static/images/alert-detail/record.png";

import { ref } from "vue";
interface Props {
  callInfo: any
  firstAlarmPerson: any
};
const {
  callInfo = {},
  firstAlarmPerson = {}
} = defineProps<Props>();
const titleName = ref<string>("报警信息");

const showPage = ref<any>(false);

function getClick() {
  showPage.value = !showPage.value
}
</script>

<style lang='less' module>
.call_container {
  width: calc(100% - 60rpx);
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  border-radius: 20rpx;
  padding: 10rpx 10rpx 10rpx 20rpx;

  .statistic {
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #2264d3;
    line-height: 40px;

    .number {
      font-size: 60rpx;
    }

    .text {
      font-size: 26rpx;
    }
  }

  .call_text {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 26rpx;
    color: #999999;
    margin-left: 10rpx;
    position: relative;

    .call_num {
      width: 28rpx;
      height: 28rpx;
      background: #FF3333;
      border-radius: 50%;
      text-align: center;
      line-height: 28rpx;
      font-size: 20rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      position: absolute;
      top: -6rpx;
      right: -30rpx;
    }
  }

  .call_duration {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 24rpx;
    color: #cccccc;
    margin-left: 10rpx;
  }

  .risk {
    width: 100%;
    height: 60rpx;
    font-size: 20rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;

    .risk_title {
      display: flex;
      padding: 0 10rpx;
      box-sizing: border-box;
      justify-content: space-between;

    }

    .risk_num {
      display: flex;
      margin: 10rpx 0;

      .left_num {
        height: 16rpx;
        background: #FF6666;
        border-radius: 8rpx;
      }

      .right_num {
        height: 16rpx;
        background: #85E9FF;
        border-radius: 8rpx;
      }

    }
  }
}
</style>
